import React, { Component } from "react"
import { observer, inject } from "mobx-react"
import cssModules from "react-css-modules"
import { Row, Col } from "antd"
import ScreenModal from "../ScreenModal"
import classnames from "classnames"
import More from "../More"
import ModalContent from "../Module/components/ModalContent/index.js"
import { toJS, when } from "mobx"
import { isEqual } from "lodash"

import styles from "./index.less"
import IconFont from "component/IconFont"
import { fromCallback } from "bluebird"

@cssModules(styles)
class BatteryItem extends Component {
  render() {
    const { battery, showIndex } = this.props
    let data = (battery && battery.batterys) || []
    let showData = data.filter((item) => {
      return item.show === true
    })
    const topRow = showData.filter((item, index) => {
      let noPhotovoltaicModules = true
      let max = noPhotovoltaicModules ? 7 : 3
      return index <= max
    })
    let electricity = battery.dumpEnergy || {}

    let articlePowerWidth = (electricity.value / 100 || 0) * 96

    return (
      <div styleName={"container-item"}>
        <div styleName={"title-container"}>
          <div styleName={"title-selected"} />
          <div styleName={"title"}>电池</div>
        </div>
        <Row styleName={"data-container"}>
          <Col styleName={"electricity"}>
            <div styleName={"battery-box-wrap"}>
              <IconFont type={"icondianchi"} styleName={"battery-box"} />
              <div
                styleName={"articlePower"}
                style={{
                  width: `${articlePowerWidth > 96 ? 96 : articlePowerWidth}px`,
                }}
              />
              <IconFont type={"icondianchichongdian"} styleName={"lightning"} />
            </div>
            <div styleName={"describe"}>
              <p styleName={"title"}>剩余电量</p>
              <p styleName={"value"}>{`${electricity.value || 0}%`}</p>
            </div>
          </Col>
          <Col styleName={"first-row"}>
            {topRow.map((item, i) => {
              return (
                <div key={i.toString(36) + i} styleName={"item"}>
                  <p styleName={"title"}>{`${item.spName}:`}</p>
                  <p styleName={"value"}>
                    {item.value
                      ? item.value + " " + (item.unit ? item.unit : "")
                      : "-"}
                  </p>
                </div>
              )
            })}
          </Col>
        </Row>
      </div>
    )
  }
}
@inject("ScreenStore")
@observer
@cssModules(styles)
class Battery extends Component {
  constructor(props) {
    super(props)

    this.store = this.props.ScreenStore
  }
  handleClick = () => {
    const { confim } = this.store
    confim("battery")
  }
  marquee = () => {
    const { battery, batteryIndex, setBatteryIndex } = this.store
    if (
      Array.isArray(battery.batteryGroups) &&
      battery.batteryGroups.length > 1
    ) {
      let len = battery.batteryGroups.length - 1
      let index = batteryIndex + 1
      index > len && (index = 0)
      setBatteryIndex(index)
    }
  }
  componentWillMount() {
    const { onWillMount } = this.store
    onWillMount()
  }

  async componentDidMount() {
    const { getBattery } = this.store
    await getBattery()
    this.timer = setInterval(this.marquee, 10000)
    this.root.onmouseover = () => {
      clearInterval(this.timer)
    }
    this.root.onmouseout = () => {
      this.timer = setInterval(this.marquee, 10000)
    }
  }
  componentWillUnmount() {
    clearInterval(this.timer)
  }
  render() {
    const { battery, confim, batteryIndex, setBatteryIndex } = this.store
    return (
      <div
        className={classnames(
          styles["container"],
          styles["no-photovoltaic-modules"]
        )}
        ref={(c) => {
          this.root = c
        }}
      >
        <BatteryItem
          confim={confim}
          battery={
            (battery.batteryGroups && battery.batteryGroups[batteryIndex]) || []
          }
        />
        <div styleName={"page"}>
          {(battery.batteryGroups || []).map((item, index) => {
            return (
              <span
                key={index.toString(36) + index}
                onClick={() => {
                  setBatteryIndex(index)
                }}
                className={classnames(
                  batteryIndex === index && styles["page-current"],
                  styles["page-item"]
                )}
              />
            )
          })}
        </div>
        <ScreenModal type={"battery"} title={"电池"}>
          {(battery.batteryGroups || []).map((item, index) => {
            let data = (item && item.batterys) || []
            return (
              <div key={index.toString(36) + index}>
                <Bg name={`${index + 1}号电池组`} />
                <ModalContent data={data} />
              </div>
            )
          })}
        </ScreenModal>
        <More handleClick={this.handleClick} />
      </div>
    )
  }
}
const Bg = ({ name }) => {
  return (
    <div className={styles["down-period-title"]}>
      <span className={styles["text"]}>{name}</span>
      <span className={styles["one"]} />
      <span className={styles["two"]} />
      <span className={styles["three"]} />
      <span className={styles["four"]} />
    </div>
  )
}

export default Battery
